<template>
	<view class="order-confirm-page">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

		<scroll-view scroll-y class="form-scroll">
			<!-- 返回箭头 -->
			<view class="back-row" @click="goBack">
				<image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
			</view>

			<!-- 搜索框 -->
			<view class="search-box">
				<image src="/static/search.png" class="search-icon" />
				<input class="search-input" placeholder="Value" />
			</view>

			<!-- 标题与说明（Brand store 放在搜索框下方） -->
			<view class="title-wrap">
				<text class="page-title">Brand store</text>
			</view>

			<!-- 店铺信息卡片（左：城市；右：地址） + 创建按钮 -->
			<view class="store-card">
				<view class="store-left">Paris</view>
				<view class="store-right">
					<text class="addr-line">123 rue Saint-Honoré</text>
					<text class="addr-line">75001</text>
				</view>
			</view>
<view class="store-actions">
    <text class="create-btn" @click="toDistribution">Create QR Code</text>
</view>

			<view class="product-list">
				<view class="product-card" v-for="(item, index) in products" :key="index">
					<view class="product-main">
						<image :src="item.image" class="product-image" mode="aspectFit" />
						<view class="product-info">
							<text class="product-code">{{ item.code }}</text>
							<text class="product-name">{{ item.name }}</text>
							<text class="product-units">{{ item.units }} units</text>
						</view>
					</view>
					<view class="product-action">
						<text class="action-btn" @click="viewQRCode(item)">View QR Code</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<CustomTabbar active="import" />

		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '70px', '--anchor-right': '0px' }"
			@close="closeMenu"
			@select="closeMenu"
		/>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import TopBar from '@/components/TopBar.vue'
import AccountMenu from '@/components/AccountMenu.vue'
import CustomTabbar from '@/components/CustomTabbar.vue'

const showMenu = ref(false)
const toggleMenu = () => { showMenu.value = !showMenu.value }
const closeMenu = () => { showMenu.value = false }
const goBack = () => { uni.navigateBack() }

const products = ref([
  { code: '46DC85241', name: 'T shirt', units: 30, image: '/static/record/type1.png' },
  { code: '46DC85242', name: 'T shirt', units: 30, image: '/static/record/type2.png' },
  { code: '46DC85243', name: 'T shirt', units: 30, image: '/static/record/type3.png' },
  { code: '46DC85244', name: 'T shirt', units: 30, image: '/static/record/type4.png' },
  { code: '36DC76542', name: 'T shirt', units: 20, image: '/static/record/type5.png' },
  { code: '36DC76542', name: 'T shirt', units: 20, image: '/static/record/type6.png' },
])

const viewQRCode = (item) => {}
const toDistribution = () => { uni.navigateTo({ url: '/pages/brand/qr-distribution' }) }
</script>

<style lang="scss">
.order-confirm-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.store-card { display: flex; align-items: center; justify-content: space-between; background: #eaf6ff; border-radius: 12px; padding: 10px 12px; margin: 0 4px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.store-left { font-size: 14px; font-weight: 700; color: #0b1e2a; }
.store-right { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.addr-line { font-size: 12px; color: #0b1e2a; }
.store-actions { display: flex; justify-content: flex-end; padding: 0 4px 8px; }
.create-btn { background: #23323a; color: #fff; border-radius: 10px; padding: 6px 12px; font-size: 12px; font-weight: 700; }

.product-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.product-card { background: #e7f5f7; border-radius: 12px; padding: 10px 12px; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.product-main { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.product-image { width: 50px; height: 50px; border-radius: 8px; background: #fff; flex-shrink: 0; }
.product-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.product-code { font-size: 14px; font-weight: 700; color: #0b1e2a; }
.product-name { font-size: 13px; color: #0b1e2a; }
.product-units { font-size: 12px; color: #0b1e2a; font-weight: 600; }
.product-action { display: flex; justify-content: center; width: 100%; }
.action-btn { background: #23323a; color: #fff; border-radius: 8px; padding: 4px 20px; font-size: 11px; font-weight: 600; text-align: center; width: 100%; max-width: 120px; line-height: 1.2; }
.form-scroll { margin-top: 60px; padding: 0 16px 84px 16px; box-sizing: border-box; }
.back-row { margin: 12px 0 0 -8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 24px; height: 24px; }
.title-wrap { margin: 0 0 8px 0; }
.page-title { font-size: 22px; font-weight: 800; color: #0b1e2a; display: block; }
.page-sub { font-size: 14px; color: #0b1e2a; opacity: .9; display: block; margin-top: 4px; }
.search-box { height: 44px; background: #fff; border-radius: 24px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); justify-content: center; margin-top: 16px; }
.search-icon { width: 16px; height: 16px; margin-right: 6px; }
.search-input { flex: 1; text-align: left; font-size: 14px; color: #333; }
.tabs { display: flex; gap: 8px; margin: 32px 0 0; }
.tab { padding: 6px 10px; background: #e6f0f5; color: #23323a; border-radius: 8px; font-weight: 800; font-size: 12px; }
.tab.active { background: #23323a; color: #fff; }
.dir-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 12px; margin-top: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.dir-icon { width: 20px; height: 20px; }
.dir-name { flex: 1; color: #0b1e2a; }
.dir-date { color: #0b1e2a; font-size: 12px; }
</style>


